<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue中的事件绑定</title>
</head>
<body>
    <div id="app">
        <p style="padding:10px;border:1px solid blue;" v-on:click="pClick" >
            <span style="border:1px solid red;" v-on:click="spanClick1('hello', $event)">点击我,传入参数和原生dom的event对象
            </span>
        </p>
        <div style="padding:10px;border:1px solid blue;" v-on:click="pClick">
                <p>事件修饰符</p>
                <p>阻止事件继续传播.stop <button @click.stop="click2">click me</button></p>
                <p>阻止默认事件.prevent
                    <form @submit.prevent.stop="submit" style="border:1px solid black">
                       <input type="submit">
                    </form>
                </p>
                <p @click.self="pClick2">只有事件是当前元素触发的才执行.self,内部元素（button）不触发
                    <button @click="click3">click</button>
                </p>
        </div>

    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
          el: "#app",
          methods: {
              pClick: function() {
                 alert("我是父元素");
              },
              spanClick1: function (msg, event) {
                  alert(msg);
                  if(event) {
                    event.stopPropagation();//阻止事件的向上冒泡
                  }
                 if(event.target.tagName == "SPAN") {
                     alert("点击自身时弹出,标签名为span");
                 }
              },
              click2: function () {
                  alert(".stop修饰过的点击事件，不会冒泡");
              },
              submit: function () {
                  alert('使用自定义的函数提交表单');
              },
              click3: function() {
                  alert(".self修饰符");
              },
              pClick2:function() {
                  alert(".self的父元素");
              }
          }
      });
    </script>
</body>
</html>